<template>
    <div class="container">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>个人中心</span>
                        </div>
                    </template>
                    <div class="avatar">
                        <el-avatar :src="userInfo.avatar" style="width: 100px;height: 100px;" />
                    </div>
                    <el-divider border-style="dotted" />
                    <div class="userInfo">
                        <el-text type="info">用户名</el-text>
                        <span>{{ userInfo.username }}</span>
                    </div>
                    <el-divider border-style="dotted" />
                    <div class="userInfo">
                        <el-text type="info"><span>性别</span></el-text>
                        <span v-if="userInfo.sex == 1">男</span>
                        <span v-else-if="userInfo.sex == 0">女</span>
                    </div>
                    <el-divider border-style="dotted" />
                    <div class="userInfo">
                        <el-text type="info"><span>所属角色</span></el-text>

                        <span>{{ userInfo.role }}</span>
                    </div>
                    <el-divider border-style="dotted" />
                    <div class="userInfo">
                        <el-text type="info"><span>手机号码</span></el-text>

                        <span>{{ userInfo.phone }}</span>
                    </div>
                    <el-divider border-style="dotted" />
                    <div class="userInfo">

                        <el-text type="info"><span>用户邮箱</span></el-text>
                        <span>{{ userInfo.email }}</span>
                    </div>
                    <el-divider border-style="dotted" />
                    <div class="userInfo">

                        <el-text type="info"> <span>创建日期</span></el-text>
                        <span>{{ userInfo.createTime }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>修改个人信息</span>
                        </div>

                    </template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="基本资料" name="userInfo">
                            <el-form :model="addForm" label-position="top" :rules="rules" ref="addFormRef">
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="addForm.username" placeholder="请输入用户名" clearable />
                                </el-form-item>
                                <el-form-item label="电话号码" prop="phone">
                                    <el-input v-model="addForm.phone" placeholder="请输入电话号码" maxlength="11" clearable />
                                </el-form-item>
                                <el-form-item label="电子邮箱" prop="email">
                                    <el-input v-model="addForm.email" placeholder="请输入电子邮箱" clearable />
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-radio-group v-model="addForm.sex">
                                        <el-radio :value="1">男</el-radio>
                                        <el-radio :value="0">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                            <div>
                                <el-button @click="handleReset">重置</el-button>
                                <el-button type="primary" @click="handleAdd(addFormRef)">
                                    保存
                                </el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="password">
                            <el-form :model="pwForm" label-position="top" :rules="pwRules" ref="pwFormRef">
                                <el-form-item label="原密码" prop="password">
                                    <el-input v-model="pwForm.password" placeholder="请输入原密码" clearable />
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                    <el-input v-model="pwForm.newPassword" placeholder="请输入新密码" clearable type="password" show-password/>
                                </el-form-item>
                            </el-form>
                            <div>
                                <el-button type="primary" @click="handleResetPw(pwFormRef)">
                                    重置密码
                                </el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </el-card>
            </el-col>
        </el-row>



    </div>
</template>

<script lang="js" setup>
import { userStore } from '@/stores/userStore';
import { ref } from 'vue';
import user from '@/services/user';
import { ElMessage } from 'element-plus';

const uStore = userStore()

const roles = []
uStore.state.loginUserInfo?.role.forEach(r => {
    roles.push(r.roleName)
});
const userInfo = ref({
    avatar: uStore.state.loginUserInfo?.avatar,
    username: uStore.state.loginUserInfo?.username,
    role: roles?.join("|"),
    phone: uStore.state.loginUserInfo?.phone,
    email: uStore.state.loginUserInfo?.email,
    createTime: uStore.state.loginUserInfo?.createTime,
    sex: uStore.state.loginUserInfo?.sex
})

const activeName = ref('userInfo')
const handleClick = () => {

}

const addFormRef = ref()
const addForm = ref({
    username: uStore.state.loginUserInfo?.username,
    phone: uStore.state.loginUserInfo?.phone,
    email: uStore.state.loginUserInfo?.email,
    sex: uStore.state.loginUserInfo?.sex,
    id: uStore.state.loginUserInfo?.userId
})


const rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入电话号码', trigger: 'blur' },

    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
    ],
})

// 重置
const handleReset = () => {
    addForm.value = {}
}

// 保存
const handleAdd = async (formRef) => {
    if (!formRef) return
    await formRef.validate((valid, fields) => {
        if (valid) {
            user.saveUser(addForm.value).then((res) => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success'
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 重置密码
const pwFormRef = ref()
const pwForm = ref({
    password: '',
    newPassword: '',
    userId: uStore.state.loginUserInfo?.userId
})

const pwRules = ref({
    password: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },

    ],
})

// 重置密码
const handleResetPw = async (formRef) => {
    if (!formRef) return
    await formRef.validate((valid, fields) => {
        if (valid) {
            user.resetPassword2(pwForm.value).then((res) => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success'
                    })
                }else{
                    ElMessage({
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="less" scoped>
.avatar {
    display: flex;
    justify-content: center;
}

.userInfo {
    display: flex;
    justify-content: space-between;
}
</style>